<template>
  <div class="flex-1 p-2">
    <n-form>
      <n-row :gutter="[10, 10]">
        <template v-for="item in fieldList" :key="item.field">
          <n-col :span="24" v-show="!item.hidden">
            <drag-warp @click="clickHandler(item)">
              <form-item-label :item="item">
                <n-input
                  v-if="item.type === 'text'"
                  v-model:value="item.defaultValue"
                  :placeholder="item.placeholder + item.label"
                  :clearable="item.clearble"
                  :disabled="item.disabled"
                  :type="item.inputType"
                />
                <n-input-number
                  class="w-full"
                  v-if="item.type === 'number'"
                  v-model:value="item.defaultValue"
                  :placeholder="item.placeholder + item.label"
                  :clearable="item.clearble"
                  :disabled="item.disabled"
                />
              </form-item-label>
            </drag-warp>
          </n-col>
        </template>
      </n-row>
    </n-form>
  </div>
</template>
<script setup lang="ts">
import DragWarp from './components/DragWarp.vue'
import FormItemLabel from './components/FormItemLabel.vue'
import { useFormStore } from '@/stores'
const store = useFormStore()
const fieldList = computed(() => store.fieldList)

const clickHandler = (item: any) => {
  console.log(item);
}
</script>
<style scoped lang="scss"></style>
